<template>
  <div>
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-header>Header</el-header>
      <el-container>
        <el-aside
          width="200px"
          style=" border: 1px solid #eee"
        >
          <el-menu :default-openeds="['1', '1']">
            <el-submenu index="1">
              <template slot="title"><i class="el-icon-message"></i>老人管理</template>
              <el-menu-item-group>
                <el-menu-item index="1-1">办理入住</el-menu-item>
                <!-- <el-menu-item index="1-2">选项2</el-menu-item> -->
              </el-menu-item-group>
              <!-- <el-menu-item index="1-3">选项3</el-menu-item> -->
              <!-- <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项4-1</el-menu-item> -->
              <!-- </el-submenu> -->
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <el-row>
            <el-button type="primary" @click="addDialogVisible=true">登记入住</el-button>
          </el-row>
        </el-main>
      </el-container>
    </el-container>
    <!-- 添加用户按钮 -->
        <el-dialog
            title="办理入住登记表"
            :visible.sync="addDialogVisible"
            width="70%"
          >
          
          <el-form :model="addForm" :rules="addFormRules" ref="addFromRef" label-width="150px">
            <el-row>
              <el-col :span="10">
                <el-form-item label="老人姓名" prop="oldname">
                  <el-input v-model="addForm.oldname">
                  </el-input>
                </el-form-item>
                <!-- <el-form-item label="身份证号" prop="username">
                  <el-input v-model="addForm.userid">
                  </el-input>
                </el-form-item> -->
                <el-form-item label="家属姓名" prop="parname">
                  <el-input v-model="addForm.parname">
                  </el-input>
                </el-form-item>
                <el-form-item label="关系：" prop="relative">
                  <el-select v-model="addForm.relative" placeholder="请选择亲属与老人的关系">
                    <el-option label="子女" value="shanghai"></el-option>
                    <el-option label="配偶" value="beijing"></el-option>
                    <el-option label="其他" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="老人联系电话：" prop="ophone">
                  <el-input v-model="addForm.ophone">
                  </el-input>
                </el-form-item>
                <el-form-item label="亲属联系电话：" prop="rphone">
                  <el-input v-model="addForm.rphone">
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col :span="10">
                <el-form-item label="身高" prop="height">
                  <el-input v-model="addForm.height" @input="calculateBMI">
                    <template slot="append">cm</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="体重" prop="weight">
                  <el-input v-model="addForm.weight" @input="calculateBMI">
                    <template slot="append">kg</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="基础疾病">
                  <el-checkbox-group v-model="addForm.disease">
                    <el-checkbox label="正常" name="disease"></el-checkbox>
                    <el-checkbox label="高血压" name="disease"></el-checkbox>
                    <el-checkbox label="糖尿病" name="disease"></el-checkbox>
                    <el-checkbox label="其他" name="disease"></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
                <!-- <el-form-item label="饮食禁忌">
                  <el-checkbox-group v-model="addForm.disease">
                    <el-checkbox label="海鲜过敏" name="disease"></el-checkbox>
                    <el-checkbox label="刺激" name="disease"></el-checkbox>
                    <el-checkbox label="辛辣" name="disease"></el-checkbox>
                    <el-checkbox label="其他" name="disease"></el-checkbox>
                  </el-checkbox-group>
                </el-form-item> -->
                <!-- <el-form-item label="饮食偏好">
                  <el-radio-group v-model="form.resource">
                    <el-radio label="清淡"></el-radio>
                    <el-radio label="素食"></el-radio>
                    <el-radio label="辛辣"></el-radio>
                    <el-radio label="清真"></el-radio>
                  </el-radio-group>
                </el-form-item> -->
              </el-col>

              <el-col :span="3">
                <div style="text-align: center; margin-top: 40px;">
                  <p>BMI指数:{{ bmi }}</p>
                </div>
              </el-col>
            </el-row>
          </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="CheckIn">保 存</el-button>
              <el-button @click="handleReset">重置</el-button>
            </span>
        </el-dialog>
  </div>
</template>

<script>
export default {
  data(){
    //验证手机号规则
    var checkMobile=(rule,value,callback)=>{
        //验证手机号正则表达式
        const regMobile=/^1\d{10}$/
        if(regMobile.test(value)){
          return callback()
        }
        callback(new Error('请输入合法的手机号'))
      }
    return{
      addDialogVisible:false,
      addForm:{
        oldname:'',
        parname:'',
        ophone:'',
        rphone:'',
        height:'',
        weight:'',
        disease:[],
      },
      addFormRules:{
        oldname:[
          {required:true,message:'请输入老人姓名',trigger:'blur'},
          {
            min:2,
            max:4,
            message:'老人姓名的长度在2~4个字符之间',
            trigger:'blur'
          }
        ],
        parname:[
          {required:true,message:'请输入家属姓名',trigger:'blur'},
          {
            min:2,
            max:4,
            message:'家属姓名的长度在2~4个字符之间',
            trigger:'blur'
          }
        ],
        ophone:[
          {required:true,message:'请输入老人手机号',trigger:'blur'},
          {
            validator:checkMobile,trigger:'blur'
          }
        ],
        rphone:[
          {required:true,message:'请输入亲属手机号',trigger:'blur'},
          {
            validator:checkMobile,trigger:'blur'
          }
        ],
        height:[
          {required:true,message:'请输入身高',trigger:'blur'},
        ],
        weight:[
          {required:true,message:'请输入体重',trigger:'blur'},
        ],
      }
    };
  },
  computed: {
    bmi() {
      const height = parseFloat(this.addForm.height);
      const weight = parseFloat(this.addForm.weight);
      if (height > 0 && weight > 0) {
        return (weight / (height/100 * height/100)).toFixed(2);
      }
      return 'N/A';
    }
  },
  methods: {
    calculateBMI() {
      this.$forceUpdate();
    },
    handleReset() {
      if (this.hasFormData()) {
        this.$confirm('现在退出会导致数据重置,是否重置?', '确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.resetForm();
          this.addDialogVisible = false;
        }).catch(() => {
          // 用户取消重置
        });
      } else {
        this.resetForm();
        this.addDialogVisible = false;
      }
    },
    resetForm() {
      this.$refs.addFromRef.resetFields();
    },
    hasFormData() {
      return Object.values(this.addForm).some(value => {
        if (Array.isArray(value)) {
          return value.length > 0;
        }
        return value.trim() !== '';
      });
    },
    CheckIn(){
      this.$refs.addFromRef.validate(valid =>{
        if(!valid)return
        //可以发起添加用户的网络请求
      })
    }
  }
};
</script>

<style>
</style>